<template>
	<view class="warp">
		<view class="title">
			请填写资料立刻获取项目详情
		</view>
		<uni-forms :modelValue="formData" :rules="rules">
			<uni-forms-item  required name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入您的称呼" />
			</uni-forms-item>
			<uni-forms-item required name="phone" >
				<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
		</uni-forms>
		<view class="button-group">
			<button class="but" type="primary" @click="submit()">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "inputForm",
		data() {
			return {
				formData: {
					name: '', //称呼
					phone: '', //手机号
					type: 1, // 提交类型
					key: 'dxxxxass', // 
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '称呼不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '年龄不能为空'
						}, {
							format: 'number',
							errorMessage: '只能输入数字'
						}]
					}
				},
			};
		},
		methods: {
			submit() {
				// 有现成的PHP后台 API提交接口，可联系组件作者
				uni.showToast({
					title: '虚拟提交，OK',
				})
				// uni.request({
				// 	url:'https://xxx',
				// 	method:'POST',
				// 	data: this.formData,
				// 	success: (res) => {
				// 		if (res.data.code == 200) {
				// 			let msg = res.data.data ? '提交成功' : '提交失败';
				// 			return uni.showToast({
				// 				title: msg
				// 			})

				// 		} else{
				// 			uni.showToast({
				// 				title:res.data.msg,
				// 				icon:'error'
				// 			})
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	.title {
		text-align: center;
		font-size: 32upx;
		font-weight: 800;
		padding: 20upx 0upx 40upx 0upx;
	}

	.warp {
		width: 710upx;
		padding: 20upx;
	}

	.but {
		background-color: #CA8F6F;
	}
</style>
